<template>
    <div>
        <div class="publish" style="color: #fff;">
            <div style="height: .98rem">
                <div class="toptools">
                    <svg @click="$router.back()" t="1674987056061" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2285"><path stroke="#ffffff" stroke-width="25" d="M362.666667 896c-4.266667 0-8.533333 0-12.8-4.266667-8.533333-8.533333-8.533333-21.333333-4.266667-29.866666L631.466667 512 345.6 162.133333c-8.533333-8.533333-4.266667-21.333333 4.266667-29.866666 8.533333-8.533333 21.333333-4.266667 29.866666 4.266666l298.666667 362.666667c8.533333 8.533333 8.533333 21.333333 0 25.6l-298.666667 362.666667c-4.266667 4.266667-12.8 8.533333-17.066666 8.533333z" fill="#ffffff" p-id="2286"></path></svg>
                    <h2>发表</h2>
                    <div></div>
                </div>
            </div>


            <form @submit.prevent="submitForm">
                <div>
                    <label>作者:</label>
                    <span>{{ author }}</span>
                </div>
                <div>
                    <label>作者头像:</label>
                    <img :src="authorAvata" width="50px" height="50px"/>
                </div>
                <div>
                    <label>内容:</label>
                    <textarea v-model="content" rows="4"></textarea>
                </div>
                <div>
                    <label>图片:</label>
                    <input type="file" name="image" @change="handleFileUpload" />
                </div>
                <button type="submit">发布</button>
            </form>
        </div>
    </div>
</template>

<script>

import { mapState } from 'vuex';
import { submitPosts } from '@/api/community/posts'


export default {
    name: 'Vue2Publish',

    data() {
        return {
            author: '',
            authorAvata: '',
            content: '',
            image: null
        };
    },

    computed: {
        ...mapState(['userinfo'])
    },
    created(){
        this.author = this.userinfo[0].name
        this.authorAvata = this.userinfo[0].avata
    },
        
    mounted() {
        console.log()
    },

    methods: {
        handleFileUpload(event) {
            this.image = event.target.files[0]
        },
        submitForm() {
            const formData = new FormData()
            formData.append('author', this.author)
            formData.append('authorAvata', this.authorAvata)
            formData.append('content', this.content)
            formData.append('image', this.image)
        
            submitPosts(formData).then(response => {
                console.log(response.data)
            })
            .catch(error => {
                console.log(error)
            })
        }
    },
    
};
</script>

<style lang="scss" scoped>
@import '@/assets/css/community/Publish.scss'
</style>